<script setup lang="ts">
import type { ISearchRecomment } from '@/types'
import { ref } from 'vue'
import OpSearch from '@/components/OpSearch.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 点击回到首页
const goHome = () => {
  router.push('/home')
}
interface IProps {
  recomments: ISearchRecomment[]
}

defineProps<IProps>()

interface IEmits {
  (e: 'searchClick'): void
}
const emits = defineEmits<IEmits>()
// 控制弹窗显示的响应式变量
const isFilterPopupVisible = ref(false)

// 打开筛选弹窗
const showFilterPopup = () => {
  isFilterPopupVisible.value = true // 直接修改这个变量的值
}
const hideFilterPopup = () => {
  isFilterPopupVisible.value = false
}
</script>

<template>
  <div class="home-top">
    <!-- 左-箭头 -->
    <div class="arrow-left">
      <van-icon name="arrow-left" size="20px" @click="goHome" />
    </div>
    <div class="search-middle">
      <OpSearch shape="round" placeholder="搜索我的订单" @inputClick="emits('searchClick')">
        <template #right-icon>
          <div @click="emits('searchClick')">搜索</div>
        </template>
      </OpSearch>
    </div>
    <!-- <div class="search-recommend">
      <div v-for="v in recomments" :key="v.value" class="tag">{{ v.label }}</div>
    </div> -->
    <!-- 筛选弹窗 -->
    <!-- 右-筛选按钮 -->
    <div class="filter-right" @click="showFilterPopup">
      <van-icon name="filter-o" size="14px" />
      <p class="filter-font">筛选</p>
    </div>
    <div v-if="isFilterPopupVisible" class="popup-overlay" @click="hideFilterPopup">
      <div class="custom-popup">
        <!-- 弹窗内容 -->
        <div class="filter-container">
          <div class="filter-section">
            <div class="filter-title">按时间选择</div>
            <div class="button-color">
              <van-button round type="default" class="filter-button">近1月</van-button>
              <van-button round type="default" class="filter-button">2023</van-button>
              <van-button round type="default" class="filter-button">2022</van-button>
            </div>
            <div class="button-bottom">
              <van-button round type="default" class="filter-button">选择起始时间</van-button>
              <van-button round type="default" class="filter-button">选择终止时间</van-button>
            </div>
          </div>
          <div class="filter-section">
            <div class="filter-title">按服务选择</div>
            <div class="button-color">
              <van-button round type="default" class="filter-button">外卖</van-button>
              <van-button round type="default" class="filter-button">美食</van-button>
              <van-button round type="default" class="filter-button">美团优选</van-button>
              <van-button round type="default" class="filter-button">其他全部</van-button>
            </div>
            <div class="button-colors">
              <van-button round type="default" class="filter-button">其他全部</van-button>
            </div>
          </div>
          <div class="filter-footer">
            <van-button round type="info" class="footer-button">清空</van-button>
            <van-button round type="warning" class="footer-button">确定</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-top {
  display: flex; // 设置元素为弹性盒子
  align-items: center; // 垂直居中对齐元素
  padding: 5px 0;
  background-color: white;
  .arrow-left {
    flex-shrink: 0; // 确保返回箭头不会缩小
    margin-left: 10px;
  }
  .search-middle {
    flex: 1;
  }
  .filter-right {
    margin-right: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 0.875rem;
    .filter-font {
      margin-top: 0.25rem;
      margin-bottom: 0;
      font-size: 0.625rem;
    }
    .van-icon.filter-o {
      flex-shrink: 0; // 确保筛选图标不会缩小
    }
  }
  .search-recommend {
    display: flex;
    padding: 0 10px 8px;
    .tag {
      font-size: 12px;
      border-radius: 10px;
      background: rgb(242, 242, 242, 0.3);
      padding: 2px 8px;
      margin-right: 10px;
    }
  }
  // 弹窗样式
  .popup-overlay {
    position: fixed; /* 覆盖整个屏幕 */
    top: 3.75rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }
  .custom-popup {
    position: fixed; /* 使用fixed而不是absolute定位 */
    top: 3.5rem; /* 调整这个值来移动弹窗距离顶部的位置 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中调整 */
    width: 95%; /* 根据需要设置宽度 */
    max-width: 500px; /* 可以设置一个最大宽度 */
    background-color: white;
    padding: 20px;
    border-bottom-left-radius: 10px; /* 设置左下角圆角 */
    border-bottom-right-radius: 10px; /* 设置右下角圆角 */
    .filter-section {
      margin-bottom: 1rem;
    }
    .filter-button {
      width: 120px;
      height: 35px;
      line-height: 40px;
      font-size: 0.875rem;
      padding: 0 15px;
    }
    .filter-title {
      font-size: 1rem;
      color: #131111;
      margin-bottom: 0.5rem;
      font-weight: bold;
    }
    .button-color {
      margin: 0.2rem;
      display: flex;
      justify-content: space-around;
    }
    .button-bottom {
      margin: 0.3rem;
      display: flex;
      justify-content: space-between;
    }
    .button-colors {
      margin: 0.3rem;
    }
    .filter-footer {
      display: flex;
      justify-content: space-around;
    }
    .footer-button {
      flex-basis: 48%;
    }
  }
}
</style>
